import { Dialog } from "@/hoc/Diolog";
import { renderForm } from "@/hoc/renderForm";
import apiStore from "@/stores/apiStore";
import { isSuccessCode, useGloablLoading } from "@Tea/utils";
import { PropType, Ref, defineComponent, } from "vue";
import { ElMessage,FormItemRule } from "element-plus"
import {  AddMenuParam, EditMenuParam, MenuFormParam, MenuItemType,  } from "@Tea/model";
import { httpCommonHandle } from "@/utils/httpUtils";
import classes from "./addDialog.module.scss"

export type MenuTitleType = "新增菜单" | "编辑菜单"
export const MenuDialog = defineComponent({
  props: {
    visible: {
      type: Object as PropType<Ref<boolean>>,
      required: true,
    },
    title: {
      type:  String as PropType<MenuTitleType>,
      required: true
    },
    targetRow: {
      type: Object as PropType<MenuItemType>,
      required: true
    },
    ruleForm: {
      type: Object as PropType<MenuFormParam>,
      default: {
        positionCode: '',
        positionName: '',
      }
    },
    // 这里可以通过props 也可以 用 emiter
    handleSuccess: Function,
    handleFail: Function,
    resetForm: Function
  },
  setup(props, ctx) {
    const { Form, submitForm, resetForm} = renderForm({
      ruleForm: props.ruleForm,
      content: [
        [
          {
            span: 24,
            label: "菜单编码",
            type: "text",
            feild: "code"
          },
          {
            span: 24,
            label: "菜单名称",
            type: "text",
            feild: "title"
          },
          {
            span: 24,
            label: "菜单序号",
            type: "text",
            feild: "menuIndex"
          }
        ]
      ],
      rules: {
        code: [
          {
            required: true, message: '请输入菜单编码', trigger: 'blur',
          }
        ],
        title: [
          {
            required: true, message: '请输入菜单名称', trigger: 'blur',
          }
        ],
        menuIndex: [
          {
            validator: (rule: Parameters<FormItemRule["validator"]>["0"], value: any, callback:(error?: string | Error) => void) => {
              if (value === '') {
                callback(new Error('序号不能为空'))
              } else if (isNaN(value) || Number(value) < 0){
  
                callback(new Error('只能输入正整数') )
              } else {
                callback()
              }
            }, message: '只能输入正整数', trigger: 'blur'
          }
        ]
      }
    });

    const { addMenu,editMenu } = apiStore().api

    // 检验成功时，loading 由 dialog 维护
    const onCheckSuccess = async function () {
      httpCommonHandle({
        loading: useGloablLoading,
        callBack: () => {
          if (props.ruleForm .menuId) {
            return editMenu(props.ruleForm as EditMenuParam)
          }

          return addMenu(props.ruleForm as AddMenuParam)
        },
        onSuccess: () => props.handleSuccess()
      })
    }

    return () => (
      Dialog({
        visible: props.visible,
        title: props.title,
        width: "600px",
        content: Form,
        onConfirm: () => submitForm(onCheckSuccess),
        slot: {
          header: <div class={`m-padding ${classes.header}`}>{
            props.ruleForm.menuId
              ? `您正在修改 ${props.targetRow.title} 的菜单信息`
              : `您将在 ${props.targetRow.title} 下新增菜单`
          }
          </div>
        },
        onClose:() => resetForm()
      })
    )
  },
})